<template>
	<view class="full-page root-style" style="background:#F9F9F9">
		<u-cell-group>
			<u-cell-item title="姓名" :value="studentName" :arrow="false"></u-cell-item>
			<u-cell-item title="已购正式课课时" :value="buyRemberLicenceCnt" :arrow="false"></u-cell-item>
			<u-cell-item title="剩余正式课课时" :value="buyRemberLicenceCnt-usedRemberLessonCnt" :arrow="false"></u-cell-item>
			<u-cell-item title="已购保温课课时" :value="buyReviewLicenceCnt" :arrow="false"></u-cell-item>
			<u-cell-item title="剩余保温课时" :value="buyReviewLicenceCnt-usedReviewLessonCnt" :arrow="false"></u-cell-item>
			<u-cell-item title="学习词汇量" :value="allStudyWordCnt" :arrow="false"></u-cell-item>
			<u-cell-item title="已掌握词汇量" :value="wordLostLv0Cnt" :arrow="false"></u-cell-item>
			<u-cell-item title="生词词汇量" :value="wordLostLvRt0Cnt" :arrow="false"></u-cell-item>
			<view style="padding: 26rpx 32rpx;color:#606266" class="flex">
				<view class="w-200rpx flex-shrink-0">学习进度</view>
				<view class="flex-1" style="color: #909399;">
					<view class="text-right mb-5px" v-for="item in bookWordList" :key="item.BookId">
						{{item.BookName}}：<text class="inline-block w-100rpx text-left">{{item.Pct}}%</text>
					</view>
				</view>
			</view>
		</u-cell-group>
		<view class="h-20px"></view>
		<u-cell-group>
			<u-cell-item @click="handleToProcess" title="过程报告" icon="file-text-fill" :icon-style="iconStyle"></u-cell-item>
		</u-cell-group>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, computed } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { dateFormat, ktluser, ktlapi, getVersion, OT, lodash } from '@/utils';
	const user = ktluser.getUser(false)
	
	const buyRemberLicenceCnt = ref(0);
	const buyReviewLicenceCnt = ref(0);
	const usedRemberLessonCnt = ref(0);
	const usedReviewLessonCnt = ref(0);
	const studentName = ref('');
	
	// 已学习的词汇总量
	const allStudyWordCnt = ref(0);
	// 生词词汇量
	const wordLostLvRt0Cnt = ref(0);
	// 熟词词汇量
	const wordLostLv0Cnt = ref(0);
	// 学习进度统计
	const bookWordList = ref([]);
	// 通过传参拿到的学生AccountId;
	let queryStudentAccountId = null;
	
	const iconStyle = computed(() => {
		// #ifdef H5
		return { marginTop: '3px' }
		// #endif
		// #ifdef MP-WEIXIN
		return { marginTop: '1px' }
		// #endif
	})
	
	function handleToProcess() {
		uni.navigateTo({
			url: './study-process-report?AccountId=' + queryStudentAccountId || user.AccountID
		})
	}
	
	onLoad((query: any) => {
		if (lodash.get(query, 'AccountId')) {
			queryStudentAccountId = query.AccountId;
		}
	})
	
	onMounted(() => {
		ktlapi({
			apiurl: OT.CommandSet,
			action: 'Cus_GetStudentDataCnt',
			data: {
				StudentAccountId: queryStudentAccountId || user.AccountID
			}
		}).then((resp: any) => {
			// 获取 该学生已购买正式课数量, 已购买体验课数量, 已使用正式课数量, 已使用体验课数量
			const {
				SumRemberLicence = 0,
				SumReviewLicence = 0,
				SumUsedRemberLesson = 0,
				SumUsedReviewLesson = 0,
				StudentName
			} = lodash.get(resp, 'data.tables[0].table[0]', {});
			buyRemberLicenceCnt.value = SumRemberLicence;
			buyReviewLicenceCnt.value = SumReviewLicence;
			usedRemberLessonCnt.value = SumUsedRemberLesson;
			usedReviewLessonCnt.value = SumUsedReviewLesson;
			studentName.value = StudentName;
			
			console.log('resp', resp.data.tables)
			// 获取 该学生已学习或者正在学习的书籍，并统计每本书已学习的词汇量
			const learndBookAndWords = lodash.get(resp, 'data.tables[1].table', [])
			// 获取 该学生所学习的每本书籍有多少词汇量, 并按书籍排序规则查询
			const bookAndWordCntInfo = lodash.get(resp, 'data.tables[2].table', [])
			bookWordList.value = bookAndWordCntInfo.map((item: any) => {
				const found = learndBookAndWords.find((ba: any) => ba.BookId === item.BookId);
				const StudyWordCnt = found ? found.StudyWordCnt : 0;
				return {
					...item,
					StudyWordCnt,
					Pct: (StudyWordCnt/item.WordCnt*100).toFixed(2)
				};
			})
			
			// 获取 该学生学习的所有词汇量
			const learndWordList = lodash.get(resp, 'data.tables[3].table', [])
			allStudyWordCnt.value = learndWordList.length;
			wordLostLv0Cnt.value = learndWordList.filter((item: any) => item.LostLv === 0).length;
			wordLostLvRt0Cnt.value = learndWordList.filter((item: any) => item.LostLv > 0).length;
		})
	})
</script>

<style>
</style>